<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="left" title="竞猜篮球" rightText="帮助" 
		color="#ffffff"	background-color="rgb(255, 61, 0)" @clickLeft="onClickLeft" @clickRight="onClickRight">
		</uni-nav-bar>
		<!-- tab -->
		<su-sticky bgColor="#fbe5e5">
			<su-tabs  :activeStyle="{color:'red'}" :lineWidth="60" :list="state.tabMaps" :scrollable="true"
				:current="state.currentTab" @change="onTabsChange">
			</su-tabs>
		</su-sticky>
		
		<basketball-mix v-if="state.currentTab==0"/>
		
		<basketball-danguan v-if="state.currentTab==1"/>
		
		<!-- 防止最后的比赛看不到，添加一个view 暂时没有好的解决办法，后期有时间再优化 、-->
		<view style="height: 100px;"></view>
		<view class="bottom-bar">
			<view class="bet_bl">
				<view class="left">
					<image src="@/static/images/del.png"></image>
					已选<text class="font-red">5</text>场
				</view>
				<view style="border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;padding-left:5px;" @click="openGuoguan">
					<text class="font-red">2串1 、3串1....</text>
					<text :class="state.showGuoguanModel?'cicon-drop-up':'cicon-drop-down'" style="font-size: 25px;" />
				</view>
				<view style="display: flex;justify-items: flex-start;">
					<text>倍数</text>
					<view style="margin-top: 11px;padding-right: 5px;margin-left: 3px;">
						<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
					</view>
				</view>
				
			</view>
			<view class="bottom-bar-foot">
				<view class="center">
					<p>[50注]<text class="font-red">100</text>元</p>
					<p>预计奖金：<text style="color: red;font-weight: bold;">100-23232</text></p>
				</view>
				<view class="right">
					<button type="default" size="mini"  disabled="true">优化奖金</button>
					<button type="warn" size="mini">下一步</button>
				</view>
			</view>
		</view>



		<!-- 过关方式弹出框 -->
		<su-popup :show="state.showGuoguanModel" type="bottom" round="10" @change="guoguanModelChange" :space="100"
			:zIndex="6000" :showClose="true">
			<view class="chooseBox">
				<view>
					<p style="margin-bottom: -8px; padding-top: 20px; color: rgb(0, 0, 0); font-weight: 600;">自由过关(多选)</p>
				</view>
				<view class="top freepass">
					<view class="radio_cell active">2串1</view>
					<view class="radio_cell">3串1</view>
					<view class="radio_cell">4串1</view>
					<view class="radio_cell">5串1</view>
					<view class="radio_cell">6串1</view>
					<view class="radio_cell">7串1</view>
					<view class="radio_cell">8串1</view>
				</view>
			</view>
		</su-popup>




	</view>

</template>


<script setup>
	import sheep from '@/sheep';
	import basketballMix from './components/basketball-mix.vue';
	import basketballDanguan from './components/basketball-danguan.vue';
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';

	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;

	onPageScroll((e) => {
		state.scrollTop = e.scrollTop <= 100;
	});

	const state = reactive({
		showGuoguanModel: false,
		currentTab: 0,
		numberValue: 0,
		vModelValue: 3,
		tabMaps : [{
				name: '混合投注',
				value: 0,
			},{
				name: '决胜单关',
				value: 1,
			}
		],
	});

	// 切换选项卡
	function onTabsChange(e) {
		state.currentTab = e.index;
	}
  // 左侧按钮：返回上一页或首页
  function onClickLeft() {
	  const hasHistory = sheep.$router.hasHistory();
    if (hasHistory) {
      sheep.$router.back();
    } else {
      sheep.$router.go('/pages/index/index');
    }
  }
  // 右侧按钮：打开快捷菜单
  function onClickRight() {
    console.log("点击帮助了")
  }
  function guoguanModelChange(e) {
  	state.showGuoguanModel = e.show
  };
  //打开过关方式选择
  function openGuoguan(){
	  if(state.showGuoguanModel){
		  state.showGuoguanModel = false
	  }else{
		  state.showGuoguanModel = true;
	  }
  }
  function change(value) {
  				state.numberValue = value;
  			}
  function changeValue(value) {
  				console.log('返回数值：', value);
  			}
  	function blur(e) {
  				console.log('blur:', e);
  			}
  	function focus(e) {
  				console.log('focus:', e);
  			}
  
	// 获取订单列表
	async function getOrderList() {
		state.loadStatus = 'loading';
		const tab = tabMaps[state.currentTab];
		const queryParams = {
			pageSize: state.pagination.pageSize,
			pageNo: state.pagination.pageNo,
			bizType: 1, // 获得推广佣金
			status: tab.value,
		}
		if (tab.value < 0) {
			delete queryParams.status;
		}
		const {
			code,
			data
		} = await BrokerageApi.getBrokerageRecordPage(queryParams);
		if (code !== 0) {
			return;
		}
		state.pagination.list = _.concat(state.pagination.list, data.list);
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
		if (state.currentTab === 0) {
			state.totals = data.total;
		}
	}

	onLoad(() => {});

	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
</script>


<style lang="scss" scoped>
	.font-red{
		color: red;
	}
	.nav-bar-title {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		text-align: center;
		padding-left: 26%;
		padding-top: 10px;
	}

	.bottom-bar {
		width: 100vw;
		position: fixed;
		z-index: 7000;
		right: 0;
		bottom: 0;
		background-color: white;
	}
	.bet_bl {
		height: 46px;
		line-height: 46px;
		text-align: center;
		box-shadow: 0 -1px 4px 0 rgb(168 167 167 / 25%);
		font-size: 14px;
		font-weight: 400;
		color: #444;
		border-bottom: 1px solid #d9d5d5;
		display: flex;
		justify-content: space-between;
	}
	.bottom-bar-foot {
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}

	.left {
		    margin-left: 10px;
		    display: flex;
		    align-items: center;
	}
	uni-image{
	    width: 30px;
		height: 30px;
	}

	.bottom-bar-foot .center {
		    font-size: 14px;
			padding: 5px 5px;
	}
	.bottom-bar-foot .center p {
			padding: 5px 5px;
	}
	.bottom-bar-foot .right {
		width: 45%;
		display: flex;
		justify-content: space-around;
	}
	.bottom-bar-foot .right button {
		padding-right:5px ;
	}
.chooseBox{
    width: 100vw;
    padding: 0 14px 10px;
    background: #fff;
    bottom: 52px;
    margin-bottom: 10px;
}
.chooseBox .top {
    padding: 16px 7px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.chooseBox .top .radio_cell.active{
    color: #ff3d00!important;
    border: 1px solid #ff3d00!important;
    background-color: #fdefef;
}
.chooseBox .top .radio_cell{
    width: 23%;
    height: 36px;
    line-height: 36px;
    margin: 3px;
    text-align: center;
    font-size: 13px;
    color: #3e4d6f;
    border: 1px solid #fff;
    background: #fff;
    float: left;
}
.freepass .radio_cell {
    border: 1px solid #bec1c9!important;
    width: 21%!important;
    margin: 6px 5px!important;
}
</style>